<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <title>请假加班管理系统</title>
</head>

<body>
<div class="container">
    <div class="row">
        <h2 class="text-center">效益管理室加班休假整体情况</h2>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-2">
            <p></p>
            <div class="panel panel-default">
                <div class="panel-heading">导航</div>
                <div class="list-group nav nav-pills nav-stacked">
                    <a class="list-group-item list-group-item-info" href="#">
                        加班休假整体情况<span class="glyphicon glyphicon-chevron-right"></span></a>
                    <a class="list-group-item list-group-item-info" href="overtime.html">
                        加班情况<span class="glyphicon glyphicon-chevron-right"></span></a>
                    <a class="list-group-item list-group-item-warning" href="vacation.html">
                        休假情况<span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-sm-10">
            <span class="badge">年份：<span>2017</span></span>
            <p></p>
            <table class="table table-striped table-bordered
                table-hover table-condensed table-responsive">
                <tr>
                    <td class="danger text-center">姓名</td>
                    <td class="info text-center">可用年假</td>
                    <td class="info text-center">已用年假</td>
                    <td class="success text-center">可用调休</td>
                    <td class="success text-center">已用调休</td>
                    <td class="primary text-center">详细</td>
                </tr>
                <tr th:each="vs:${vacationStatusList}">
                    <td class="text-center" th:text="${vs.uId}">20</td>
                    <td class="text-center" th:text="${vs.nianjiaDays}">15</td>
                    <td class="text-center" th:text="${vs.nianjiaUsed}">8</td>
                    <td class="text-center" th:text="${vs.tiaoxiuDays}">4</td>
                    <td class="text-center" th:text="${vs.tiaoxiuUsed}">2</td>
                    <td class="text-center">
                        <a title="详细记录" data-toggle="modal" data-target="#helpModal" href="#" th:id="${vs.uId}">
                            <span class="glyphicon glyphicon-zoom-in"></span>
                        </a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="modal fade" id="helpModal" role="dialog" aria-labelledby="helpModal">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-2 col-xs-offset-4">
            <a class="btn btn-warning btn-sm btn-block" type="submit" href="vacation.html">申请休假</a>
        </div>
        <div class="col-xs-2 col-xs-offset-1">
            <a class="btn btn-info btn-sm btn-block" type="submit" href="overtime.html">申请加班</a>
        </div>
    </div>
</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script>
    $(document).ready(function () {
        $("#shenqingjiaban").click(function () {
            $("#divtest").load("attendance/K10532.html")
        });
        $("table a").click(
            function () {
                var uId = $(this).attr("id");
                var url = "attendance/" + uId;
                $("div #helpModal").load(url);
            }
        )
    });
</script>
</body>
</html>